/* 
    Document   : style2
    Created on : Apr 17, 2014, 10:25:34 AM
    Author     : baonguyen
    Description:
        Purpose of the deltagroup follows.
*/
body{
    font-family: 'Roboto',sans-serif,Arial;
    color: #333;
    background: #e7e7e7;
}
.hide{
    display: none
}
.main-wrap{
    width: 980px;
    margin: 0 auto;
}
.clear{
    clear: both
}
.fl{
    float: left;
}
.fr{
    float: right
        ;}
.err , .errorMessage{
    color: red
}
.err {
    margin-left: 179px;
}
.control-label .required{
    color: red
}
.min-width-site{
    min-width: 980px;
}
/* Header*/
.row-menu{
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #6AC269;
    background-image: linear-gradient(to bottom, #0DA511, #6AC269);
    background-repeat: repeat-x;
    border-bottom: 1px solid #3F3F3F;
    box-shadow: 0px 0px 5px 2px #989898;
}
.row-cate{
    background: #fff;
    height: 50px;
    border-bottom: 1px solid #AAAAAA;
}


/*CSS menu*/
#cssmenu {
    position: relative;
    height: 60px;
    width: auto;
}
#cssmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}
#cssmenu > ul {
    position: relative;
    display: block;
    z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu.align-center ul {
    text-align: center;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu > ul > li {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
}
#cssmenu > ul > #menu-button {
    display: none;
}
#cssmenu ul li a {
    display: block;
    text-decoration: none;
}
#cssmenu > ul > li > a {
    padding: 20px 19px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -ms-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
    padding-right: 32px;
}
#cssmenu > ul > li:hover {
    background: rgba(0, 0, 0, .1);
}
.acitve_menu{
    background: rgba(0, 0, 0, .1);
}
#cssmenu .has-sub::after {
    display: block;
    content: '';
    position: absolute;
    width: 0;
    height: 0;
}
#cssmenu > ul > .has-sub::after {
    right: 10px;
    top: 46%;;
    border: 5px solid transparent;
    border-top-color: #FFFFFF;
    transition: all .2s ease;
}
#cssmenu > ul > li:hover::after {
    border-bottom-color: #333;
    border-top-color: rgba(204, 204, 204, 0);
    top: 96%;
    transition: all .2s ease;
}
/*#indicatorContainer {
    position: absolute;
    height: 12px;
    width: 100%;
    bottom: 0px;
    overflow: hidden;
    z-index: -1;
}*/
/*#pIndicator {
    position: absolute;
    height: 0;
    width: 100%;
    border: 12px solid transparent;
    border-top-color: #2b2f3a;
    z-index: -2;
    -webkit-transition: left .25s ease;
    -moz-transition: left .25s ease;
    -ms-transition: left .25s ease;
    -o-transition: left .25s ease;
    transition: left .25s ease;
}
#cIndicator {
    position: absolute;
    height: 0;
    width: 100%;
    border: 12px solid transparent;
    border-top-color: #2b2f3a;
    top: -12px;
    right: 100%;
    z-index: -2;
}*/
#cssmenu ul ul {
    position: absolute;
    left: -9999px;
    top: 70px;
    opacity: 0;
    -webkit-transition: opacity .3s ease, top .25s ease;
    -moz-transition: opacity .3s ease, top .25s ease;
    -ms-transition: opacity .3s ease, top .25s ease;
    -o-transition: opacity .3s ease, top .25s ease;
    transition: opacity .3s ease, top .25s ease;
    z-index: 1000;
}
#cssmenu ul ul ul {
    top: 37px;
    padding-left: 5px;
}
#cssmenu ul ul li {
    position: relative;
}
#cssmenu > ul > li:hover > ul {
    left: auto;
    top: 60px;
    opacity: 1;
    padding-top: 10px;
}
#cssmenu.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
    opacity: 1;
}
#cssmenu ul ul li:hover > ul {
    left: 170px;
    top: 0;
    opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
    left: auto;
    right: 170px;
    top: 0;
    opacity: 1;
    padding-right: 5px;
}
#cssmenu ul ul li a {
    width: 130px;
    border-bottom: 1px solid #eeeeee;
    padding: 10px 20px;
    color: #333;
    text-shadow: none;
    background: #ffffff;
    /*    -webkit-transition: all .35s ease;
        -moz-transition: all .35s ease;
        -ms-transition: all .35s ease;
        -o-transition: all .35s ease;
        transition: all .35s ease;*/
}
#cssmenu.align-right ul ul li a {
    text-align: right;
}
#cssmenu ul ul li:hover > a {
    background-color: #3F578B;
    background-image: linear-gradient(to bottom, #4F6DAE, #3F578B);
    color: #fff;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
    border-bottom: 0;
}

#cssmenu.align-right > ul > li > ul::after {
    left: auto;
    right: 30px;
}
#cssmenu ul ul li.has-sub::after {
    border: 4px solid transparent;
    border-left-color: #333;
    right: 10px;
    top: 12px;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
    border-left-color: transparent;
    border-right-color: #333;
    right: auto;
    left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
    border-left-color: #333;
    right: -5px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
    border-right-color: #ffffff;
    border-left-color: transparent;
    left: -5px;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#cssmenu .search-form .input-append{
    float: right;
    text-align: right;
    margin: 3px;
}

.input-search{
    width: 100%;
    height: 25px;
    border-right: 0px!important;
    border-color: #D6D1D1!important;
}
.form-search{
    margin: 0;
    width: 40%!important;
    float: right;
    margin-top: 7px;
    margin-right: 45px;
}
.input-append{
    width: 100%!important;
}
.btn-search{
    height: 35px;
    border-radius: 0 4px 4px 0!important;
    background: url('../img/search_right.png');
    padding: 0!important;
    border: 0px!important;
}
.btn-search img{
    width: 32px;
}
.content{
    background: #e7e7e7;
}
.list-product-hl .summary-product{
    margin-bottom: 0px!important
}
.box-content{
    background: #e7e7e7;
    padding: 25px 0 0
}
.product-hl{
    margin-top: 10px;
    margin-top: 10px;
    background: #fff;
    padding: 3px;
    border-radius: 5px;
}
.box-img {
    width: 63.5%;
    float: left
}
.box-img img{
    width: 100%;
    height: 472px;
}
.cl-info-product{
    float: left;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid #ccc;
    min-height: 475px;
    width: 33.8%;
}
.title-product{
    margin: 0px;
    line-height: 25px;
    font-size: 20px;
    margin-top: 10px;
}
.district{
    color: #868686;
    font-weight: 700;
    padding-left: 20px;
    background: url('../img/bg/bg-adr.png') no-repeat;
    background-size: contain;
    margin: 2px 0;
}
.box-btn-price{
    height: 135px;
    width: 272px;
    position: relative;
    margin: 25px 0 15px;
    text-align: center;
}
.price-btn{
    background: url('../img/bg/V6bg_price1.png') repeat-x;
    height: 135px;
    width: 299px;
    position: absolute;
    right: 11px;
}
.btn-bao{
    border-radius: 43px!important;
    font-weight: 700!important;
}
.price{
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    margin-top: 30px;
}
.summary-product{
    line-height: 23px;
    text-align: justify;
    margin: 0 0 17px;
}
.address-project{
    border-top: 1px solid #ccc;
    padding-top: 5px;
    margin-top: 5px;
    text-align: justify;
    font-style: italic;
}
.count-product{
    padding-left: 25px;
    background: url('../img/ico-detail.png') 0 5px no-repeat;
    margin: 10px;
}
.product-hl .row-count-view{
    background: #E9E9E9;
    border-top: 1px solid #ccc;
}
/*footer*/
footer{
    color: #fff!important;
}
#footer1{
    background-color: #0A0A0A;
    background-image: linear-gradient(to bottom, #5B5B5B, #000000);
    padding: 15px 0 10px;
}
#footer1 h2 , footer .title-menu{
    font-size: 24px;
    line-height: 40px;
    margin: 0px
}
.title-menu{
    font-weight: 700
}
.border-solid-footer{
    border-bottom: 1px solid rgba(180, 180, 180, 0.54)
}
.item-contact img{
    margin-top: 5px;
    margin-right: 5px;
    width: 11px;
}
.item-contact div{
    width: 95%
}
.content-news{
    padding-top: 10px
}
.contact{
    margin: 10px 0;
}
.item-contact{
    margin: 3px 0;
}
.f-colum1{
    width: 75%;
    margin-right: 5%;
}
.f-colum2{
    width: 20%
}
.menu-footer .list-item{
    margin: 10px 0;
    padding: 0px;
    list-style: none;
}
.menu-footer .list-item li a:hover{
    text-decoration: none;
    color: #005580
}
.menu-footer .list-item li a{
    color: #fff;
}
.menu-footer .list-item li{
    padding-left: 15px;
    background: url(../img/bg/star1.png) 0 4px no-repeat;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#footer2{
    background-color: #393939;
    background-image: linear-gradient(to bottom, #393939, #313131);
    padding:  3px 0;
    font-size: 13px;
}
#footer2 .span7{
    line-height: 33px;
}
#footer2 .span5{
    text-align: right!important;
}
#footer2 .span5 img{
    margin-right: -15px;
}
/* list product*/
.list-product-hl{
    background: #fff;
    padding: 2px;
    border-radius: 5px;
    margin-bottom: 25px;
    opacity: 0.9;
    position: relative
}
.list-product-hl:hover{
    opacity: 1
}
.list-product-hl:hover{
    box-shadow: 0px 0px 9px #828282;
}
.list-product-hl:hover >.btn-price{
    background: #ccc
}
.list-product-hl:hover >.btn-hover{
    display: block;
    left: 25%;
}
.list-product-hl.p-big:hover >.btn-hover{
    display: block;
    left: 34%;
    top: 52%;
}
.title-address:hover{
    text-decoration: none
}
.title-address{
    font-size: 25px;
    font-weight: 700;
    margin-top: 0px;
    margin: 0px;
    line-height: 25px;
    color: #3F578B;
}
.title-product a{
    color: #333;
}
.title-product a:hover{
    text-decoration: none
}
.img-sum{
    padding: 8px;
    position: relative
}
.ic-new{
    background: url('../img/icon-new.png') no-repeat;
    background-size: contain;
    height: 75px;
    width: 75px;
    position: absolute;
    top: 6px;
    right: 5px;
}
.ic-hot{
    background: url('../img/icon_hot.png') no-repeat;
    background-size: contain;
    height: 55px;
    width: 55px;
    position: absolute;
    top: 7px;
    right: 6px;
}
.p-small .ic-hot{
    top: 3px;
    right: 1px;
}
.p-img-sum .ic-new{
    top: 2px;
    right: 0px;
}
.btn-price{
    background: #F1F1F1;
    padding: 10px 0;
    border-top: 1px solid #ccc;
}
.price-item{
    font-weight: 700;
    color: #CA0000;
    margin: 0;
    font-size: 24px;
    margin-left: 12px!important;
    line-height: 30px!important;
}
.mr-r-none{
    margin-right: 0px!important
}
.mr-l-none{
    margin-left: 0px!important;
}
.cat-box-product{
    background: #f3f3f3;
    padding: 25px 0 0;
}
.img-sum a img {
    height: 290px;
    border: 1px solid #ccc;
}
.hl-sum{
    height: 90px;
    overflow: hidden;
}
.img-sum .title-product {
    margin-bottom: 4px
}
.p-img-sum{
    padding: 3px;
}
.p-img{
    height: 217px!important;
}
.btn-price{
    position: absolute;
    bottom: 1px;
    width: 99%!important;
    right: 1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.p-title , .p-sum {
    padding: 0 4px;
}
.p-title{
    font-size: 14px;
    margin-bottom: 0px!important;
    line-height: 20px!important;
}
.p-sum{
    height: 87px;
    margin-bottom: 5px;
}
.p-small{
    height: 415px
}
.p-big{
    height: 510px
}
/* page list product */
.box-shadow-none{
    box-shadow: none!important;
}
.br-r{
    height: 30px;
    border-right: 1px solid #ccc;
    float: right;
    margin-top: 10px;
}
#name-box-cate:hover > .box-category{
    display: block
}
.r-price{
    color: #ff0000;
    font-style: italic
}
.r-list .span5{
    height: 76px;
}
.r-list .span7{
    font-style: italic;
    line-height: 15px;
    color: #444;
}
.r-title{
    font-size: 14px;
    margin: 8px 0 5px 0;
    border-top: 1px dotted #333;
    padding-top: 5px;
    line-height: 16px;
}
.name-box{
    font-size: 20px;
    margin: 2px 0 10px;
}

#content{
    text-align: justify;
    padding: 15px;
}
.breadcrumbs{
    background-color: #FEFEFE;
    background-image: linear-gradient(to bottom, #FFFFFF, #F6F6F6);
    padding: 5px 10px;
    border-radius: 2px;
}
.box-news{
    background: #fff;
    margin: 20px 0;
    padding: 10px;
    border-radius: 5px;
}
/*news page*/
.n-sum{
    padding-bottom: 10px;
    margin: 10px 0;
    height: 120px;
    overflow: hidden;
}
.n-desc{
    height: 170px!important;
}
.news-title{
    color: #005580;
    margin-bottom: 15px;
    font-size: 25px;
    margin-top: 0px;
}
.view-more{
    text-align: right;
}
.box-news{
    opacity: 0.9
}
.box-news:hover {
    opacity: 1
}
.suport-icon{
    width: 20px;
    float: left;
    margin-top: 3px;
}
.padding-bt-10{
    padding-bottom: 10px;
}
.breadcrumbs{
    /*margin-bottom: 10px;*/
    padding-left: 5px;
}
.breadcrumbs a:hover {
    text-decoration: none
}
.breadcrumbs a {
    color: #333
}
.breadcrumbs a img{
    margin: -3px 0 0;
    width: 13px;
}
.breadcrumbs span ,.breadcrumbs a{
    margin: 0 5px
}
.title-project{
    line-height: 27px;
    font-size: 18px;
    color: #005580;
}
.page{
    text-align: center;
    margin: 20px 0;
}
.box-img:hover > .btn-hover{
    display: block;
}
.cl-info-product:hover > .btn-hover{
    display: block
}
.btn-hover{
    display: none;
    position: absolute;
    top: 45%;
    left: 42%
}
#scroll-top{
    float: right;
    bottom: 30px;
    position: fixed;
    right: 28px;
}
.btn-primary{
    background-color: #6AC269!important;
    background-image: linear-gradient(to bottom, #0DA511, #6AC269)!important;
    /*    background-color: #1A3E8D!important;
        background-image: linear-gradient(to bottom, #5672AF, #1A3E8D)!important;*/
    border: none!important;
}
.btn-success{
    background-color: #C51313!important;
    background-image: linear-gradient(to bottom, #E03838, #C51313)!important;
    border: none!important;
}